<template >
  <div class='list'>
    <div v-if='data.datetime '>
      <cons-card :data='data' :content='data.all' />
      <div class='health-count'>
        <div>
          <span> 健康指数</span>
          <p>{{data.health||0}}</p>
        </div>
        <div>
          <span> 工作指数</span>
          <p>{{data.work||0}}</p>
        </div>
        <div>
          <span> 爱情指数</span>
          <p>{{data.love||0}}</p>
        </div>
        <div>
          <span> 财运指数</span>
          <p>{{data.money||0}}</p>
        </div>
      </div>
      <div class='ul'>
        <cons-item labal='今日日期' :content='data.datetime' />
        <cons-item labal='配对星座' :content='data.QFriend' />
        <cons-item labal='幸运颜色' :content='data.color' />
        <cons-item labal='幸运数字' :content='data.number' />
      </div>
      <cons-main title='明天' :content='data.summary' v-if='data.summary' />
    </div>
    <el-load v-else />
  </div>
</template>
<script>
import ConsCard from '@/components/common/card.vue'
import ConsItem from '@/components/common/consItem.vue'
import ConsMain from '@/components/common/consmain.vue'
export default {
  name: 'todaylist',
  props: {
    data: Object
  },

  components: {
    ConsCard,
    ConsItem,
    ConsMain
  },
  setup() {}
}
</script>
<style lang="less" scoped>
.health-count {
  height: 80px;
  padding: 0 14px;
  border-top: 1px solid #ccc;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    span {
      margin-bottom: 8px;
    }
    p {
      font-weight: 700;
    }
  }
  div:nth-child(1) {
    background-color: #fff9cc;
  }
  div:nth-child(2) {
    background-color: #efffff;
  }
  div:nth-child(3) {
    background-color: #fff8ef;
  }
  div:nth-child(4) {
    background-color: #fff9de;
  }
}
.ul {
  padding: 10px 14px;
  font-size: 16px;
}
.going {
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
</style>
